<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { Plus } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import { addCategoryAPI } from "@/api/creation.ts";
import { ElMessage } from "element-plus";
import { useCategoryStore } from "@/store/category.ts";
import { editCategoryAPI } from "@/api/creation.ts";
import { CategoryRules } from "@/view/Category/utils/rules.ts";

const actionUrl = import.meta.env.VITE_UPLOAD_CATEGORY_ICON
const typeRef = ref(0)
const ruleFormRef = ref<FormInstance>()
const categoryStore = useCategoryStore()
const dialogVisible = ref(false)
const id = ref()
const ruleForm = reactive({
  name: '',
  nickname: '',
  icon: ''
})

// 图片上传成功
const onSuccess = (response: any) => {
  ruleForm.icon = response.data
}

// 初始方法
const init = (row: any, type: any) => {
  typeRef.value = type
  if (type === 0) {
    // 新增
    ruleForm.name = ''
    ruleForm.nickname = ''
    ruleForm.icon = ''
    id.value = ''
  } else {
    // 编辑
    ruleForm.name = row.name
    ruleForm.nickname = row.nickname
    ruleForm.icon = row.icon
    id.value = row._id
  }
  dialogVisible.value = true
}

// 添加分类
const handleCommit = async () => {
  ruleFormRef.value?.validate(async valid => {
    if (valid) {
      const res: any = await addCategoryAPI(ruleForm)
      if (res.code === 0) {
        ElMessage({
          type: "success",
          message: '添加成功'
        })
      }
      handleClose()
      await categoryStore.getCategoryList()
    }
  })
}

// 清空表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

// 关闭弹框
const handleClose = () => {
  dialogVisible.value = false
  resetForm(ruleFormRef.value)
}

// 修改分类
const handleChange = async () => {
  ruleFormRef.value?.validate(async valid => {
    if (valid) {
      const res: any = await editCategoryAPI(id.value, ruleForm)
      ElMessage({
        type: res.code === 0 ? "success" : "error",
        message: res.message
      })
      handleClose()
      await categoryStore.getCategoryList()
    }
  })
}

defineExpose({
  init
})
</script>

<template>
  <el-dialog v-model="dialogVisible" :title="typeRef === 0 ? '添加分类' : '编辑分类'">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="CategoryRules"
      style="padding: 0 50px"
      class="demo-ruleForm"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="ruleForm.name" type="text" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="ruleForm.nickname" type="text" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="图标">
        <el-upload :action="actionUrl"
                   :on-success="onSuccess"
                   list-type="picture-card">
          <el-icon>
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" v-if="typeRef === 0" @click="handleCommit">
          确定
        </el-button>
          <el-button type="primary" v-else @click="handleChange">
          修改
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
